<template>
  <view class="feedback-container">
    <view class="form-container">
      <up-form :model="formData" :rules="rules" ref="formRef" label-width="6em">
        <up-form-item label="反馈类型" prop="type" required>
          <up-radio-group v-model="formData.type">
            <up-radio name="suggestion" label="建议"></up-radio>
            <up-radio name="bug" label="问题反馈"></up-radio>
            <up-radio name="other" label="其他"></up-radio>
          </up-radio-group>
        </up-form-item>

        <up-form-item label="反馈内容" prop="content" required>
          <up-textarea
            v-model="formData.content"
            placeholder="请详细描述您的问题或建议"
            height="200"
          ></up-textarea>
        </up-form-item>

        <up-form-item label="上传图片" prop="images">
          <up-upload
            v-model="formData.images"
            :max-count="3"
            :preview-full-image="true"
            :multiple="true"
          ></up-upload>
        </up-form-item>

        <up-form-item label="联系方式" prop="contact">
          <up-input
            v-model="formData.contact"
            placeholder="手机/邮箱/微信(选填)"
          ></up-input>
        </up-form-item>
      </up-form>

      <view class="submit-btn">
        <up-button type="primary" @click="submitForm" :loading="loading">
          提交反馈
        </up-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface FeedbackForm {
  type: string;
  content: string;
  images: string[];
  contact: string;
}

const formRef = ref();
const loading = ref(false);
const formData = ref<FeedbackForm>({
  type: "suggestion",
  content: "",
  images: [],
  contact: "",
});

const rules = {
  type: [
    {
      required: true,
      message: "请选择反馈类型",
      trigger: "change",
    },
  ],
  content: [
    {
      required: true,
      message: "请填写反馈内容",
      trigger: "blur",
    },
    {
      min: 10,
      message: "反馈内容不能少于10个字",
      trigger: "blur",
    },
  ],
};

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      // 模拟提交
      setTimeout(() => {
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
        loading.value = false;
        formData.value = {
          type: "suggestion",
          content: "",
          images: [],
          contact: "",
        };
      }, 1500);
    }
  });
}
</script>

<style lang="scss" scoped>
.feedback-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;

  .form-container {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;

    .submit-btn {
      margin-top: 60rpx;
    }
  }
}
</style>
